<template>
    <el-card shadow="never">
      <el-row>
        <el-form :model="user" label-width="100px">
          <el-form-item label="用户头像">
            <el-avatar :size="50" :src="user.userAvatar"></el-avatar>
          </el-form-item>
          <el-form-item label="用户id">
            <el-input disabled v-model="user.userId"></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input   :disabled="editName" v-model="user.userName"></el-input>
            <el-button v-if="editName" @click="editName=false" type="text">编辑</el-button>
            <el-button v-if="!editName" @click="updateName" type="text">保存</el-button>
            <el-button v-if="!editName" @click="cancelName" type="text">取消</el-button>
          </el-form-item>
          <el-form-item label="用户性别">
            <el-select  :disabled="editGender" v-model="user.userGender"  placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button v-if="editGender" @click="editGender=false" type="text">编辑</el-button>
            <el-button v-if="!editGender" @click="updateGender" type="text">保存</el-button>
            <el-button v-if="!editGender" @click="cancelGender" type="text">取消</el-button>
          </el-form-item>
          <el-form-item label="用户邮箱">
            <el-input :disabled="editEmail"  v-model="user.userEmail"></el-input>
            <el-button v-if="editEmail" @click="editEmail=false" type="text">编辑</el-button>
            <el-button v-if="!editEmail" @click="updateEmail" type="text">保存</el-button>
            <el-button v-if="!editEmail" @click="cancelEmail" type="text">取消</el-button>
          </el-form-item>
          <el-form-item label="注册时间">
            <el-input disabled v-model="user.registerTime"></el-input>
          </el-form-item>
          <el-form-item label="修改密码">
            <el-button v-if="!editPassword" @click="editPassword=true">修改</el-button>
            <div v-if="editPassword" style="width: 200px;">
              <el-input class="updatePassword" v-model="oldPassword" placeholder="输入原密码"></el-input>
              <el-input class="updatePassword" v-model="newPassword" placeholder="输入新密码"></el-input>
              <el-input class="updatePassword" v-model="checkPassword" placeholder="确认新密码"></el-input>
              <el-button @click="updatePassword ">修改</el-button>
              <el-button @click="cancelPassword ">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-row>
    </el-card>
</template>

<script>
import {getInfo, updateUserInfo} from "@/api/user";
import md5 from 'js-md5'
export default {
  name: "account",
  data(){
    return{
      editName:true,
      editGender:true,
      editEmail:true,
      editPassword:false,
      oldPassword:'',
      newPassword:'',
      checkPassword:'',
      options:[
        {
          value: 'MALE',
          label: '男',
        },
        {
          value: 'FEMALE',
          label: '女',
        },

      ],
      newUser:{
        userName:'',
        userEmail:'',
        userGender:'',
      },
      user:{
        userId:'',
        userName:'',
        userGender:'',
        userAvatar:'',
        registerTime:'',
        userEmail:''
      }
    }
  },
  mounted() {
    if (this.$store.getters.username!=='')
    this.getUser()
  },
  methods:{
    //修改用户名
    cancelName(){
      this.user.userName=this.newUser.userName
      this.editName=true
    },
    updateName(){
      if(this.user.userName==='client' || this.user.userName==='server'){
        this.$message({
          type:'warning',
          message:'名称含有系统保留字段，请更换'
        })
        return
      }
      const user={userName: this.user.userName}
      updateUserInfo(this.newUser.userName,user).then(()=>{
        //成功就把名字修改
        this.newUser.userName=user.userName
        this.editName=true
        this.logout()
      })
    },
    //修改性别
    cancelGender(){
      this.user.userGender=this.newUser.userGender
      this.editGender=true
    },
    updateGender(){
      const user={userGender: this.user.userGender}
      updateUserInfo(this.newUser.userName,user).then(()=>{
        this.newUser.userGender=user.userGender
        this.editGender=true
      })
    },
    //修改邮箱地址
    updateEmail(){
      const b = /^\w+@[\da-z\\.-]+\.([a-z]{2,6}|[\u2E80-\u9FFF]{2,3})$/.test(this.user.userEmail);
      if (!b){
        this.$message({
          type:'warning',
          message:'邮箱格式错误'
        })
        return
      }
      const user={userEmail: this.user.userEmail}
      updateUserInfo(this.newUser.userName,user).then(()=>{
        this.newUser.userEmail=user.userEmail
        this.editEmail=true
      })
    },
    cancelEmail(){
      this.user.userEmail=this.newUser.userEmail
      this.editEmail=true
    },
    //修改密码
    updatePassword(){
      if(!/^[0-9a-zA-Z]{6,15}$/.test(this.newPassword)){
        this.$message({
          type:'warning',
          message:'账号必须是由6-15位数字和字母组合'
        })
        return
      }
      if (this.newPassword!==this.checkPassword){
        this.$message({
          type:'warning',
          message:'两次输入不一致'
        })
        return
      }
      const info=this.newUser.userName+'-'+md5(this.oldPassword)
      const user={userPassword: md5(this.newPassword)}
      updateUserInfo(info,user).then(()=>{
        this.oldPassword=''
        this.newPassword=''
        this.checkPassword=''
        this.editPassword=false
        this.logout()
      })
    },
    cancelPassword(){
      this.oldPassword=''
      this.newPassword=''
      this.checkPassword=''
      this.editPassword=false
    },
    getUser(){
      getInfo(this.$store.getters.username).then(response =>{
        this.user=response.data.userInfo
        this.newUser.userName=this.user.userName
        this.newUser.userEmail=this.user.userEmail
        this.newUser.userGender=this.user.userGender
      })
    },
    logout() {
      if (this.$websocket.ws && this.$websocket.ws.readyState === 1) {
        this.$websocket.ws.close()
      }
      // 将动态路由添加进路由器
      this.$store.dispatch('user/resetToken').then(() => {
        this.$message({
          type:'warning',
          message:'修改用户名或密码后需重新登录'
        })
        this.$router.replace(`/login?redirect=${this.$route.fullPath}`)
      })
    },
  }
}
</script>

<style scoped>
.updatePassword{
  padding: 5px;
}
/deep/.el-input{
  width: 200px;
}
/deep/.el-input__inner{
  width: 200px;
}
</style>
